<div class="bg-primary text-white py-4">
  <div class="container">
    <h1>Portfolios</h1>

    <div class="d-flex">
      <div class="w-75">
        The Portfolio Management tool allows you to easily upload portfolios into Global Access, which can be used to run various
        customized reports. You can share portfolios with your colleagues or reserve them for personal use. You will be able
        to edit portfolios that you have created.
      </div>
      <div class="ml-auto">
        <button class="btn btn-white text-primary" [disabled]="!hasPortfolioPermision" data-toggle="modal" data-target="#portfolioUploadModal">
          <i class="ti-plus"></i> Add Portfolio</button>
      </div>
    </div>
  </div>
</div>

<div class="bg-primary-medium" *ngIf="hasMonitoringClaim">
  <div class="container">
    <div class="d-flex">
      <div class="w-25 py-4" *ngIf="monitoringStatus">
        Monitoring All

        <ui-switch size="small" class="ml-2 mt-2" [swal]="{
                                  title: 'Monitoring All',
                                  text: 'Are you sure you want to turn monitoring all ' + (monitoringStatus.isMonitoringAll ? 'off' : 'on') + '?',
                                  type: '',
                                  confirmButtonText: (monitoringStatus.isMonitoringAll ? 'I confirm' : 'Monitor All'),
                                  imageUrl: '/assets/icons-svg/icon-warning.svg',
                                  imageClass: 'sweetalert-icon'
                              }" (confirm)="portfolioMonitoringAllClick()" (cancel)="monitoringStatus.isMonitoringAll = !monitoringStatus.isMonitoringAll"
          [(ngModel)]="monitoringStatus.isMonitoringAll" [disabled]="!hasMonitoringClaim">
        </ui-switch>
      </div>
      <div class="w-75 py-4">
        Select this option to receive bi-weekly email Alerts notifications for changes related to substantial Controversies for all
        companies within your subscription universe or select individual portfolios to be included in your Alerts below.
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="d-flex mt-5">
    <h4 class="mr-auto">Your Portfolios</h4>
  </div>
  <p class="w-75 secondary-text">
    Overview of each customized portfolio that you have uploaded. Switch Share setting to ON to share with colleagues. By switching
    Monitoring setting ON your Portfolio will be subscribed to our bi-weekly alerts service and receive email updates regarding
    changes in controvery assessments and outlooks for your portfolio constituents.
  </p>

  <div class="mt-3" *ngIf="monitoringStatus">
    <list-portfolio [portfolioStatus]="allPortfolioStatus" [myPortfolios]="true" [portfolioType]="customPortfolio" (reloadPortfolios)="reloadPortfolios()" [isMonitorAllChecked]="monitoringStatus.isMonitoringAll" [monitoringStatus]="monitoringStatus"
      #allPortfolioList></list-portfolio>
  </div>
  <div class="d-flex mt-5">
    <h4 class="mr-auto">Shared Portfolios</h4>
  </div>
  <p class="w-75 secondary-text">Add, view or export shared portfolios from other account users.</p>

  <div class="mt-3" *ngIf="monitoringStatus">
    <list-portfolio [portfolioStatus]="sharedPortfolioStatus" [portfolioType]="customPortfolio" (reloadPortfolios)="reloadPortfolios()" [isMonitorAllChecked]="monitoringStatus.isMonitoringAll" [monitoringStatus]="monitoringStatus"
      #sharePortfoliosList></list-portfolio>
  </div>

  <div class="d-flex mt-5">
    <h4 class="mr-auto">System Portfolios</h4>
  </div>
  <p class="w-75 secondary-text">View or export Sustainalytics' standard benchmark portfolios.</p>

  <div class="mt-3" *ngIf="monitoringStatus" >
    <list-portfolio [portfolioStatus]="allPortfolioStatus" [portfolioType]="systemPortfolio" (reloadPortfolios)="reloadPortfolios()" [isMonitorAllChecked]="monitoringStatus.isMonitoringAll" [monitoringStatus]="monitoringStatus"
      #systemPortfolioList></list-portfolio>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="portfolioUploadModal" tabindex="-1" role="dialog" aria-labelledby="portfolioUploadModalLabel"
  aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="mb-0" id="portfolioUploadModalLabel">Add Portfolio</h4>
      </div>
      <div class="modal-body">
        <portfolio-creation #portfolioCreationForm (reloadPortfolios)="reloadPortfolios()"></portfolio-creation>
      </div>
      <div class="modal-footer">
        <div *ngIf="portfolioCreationForm.showFirstStep">
          <button class="btn btn-transparent" (click)="portfolioCreationForm.onCloseClicked();" data-dismiss="modal">Close</button>
          <button class="btn btn-primary-dark ml-2" [disabled]="portfolioCreationForm.saveDisabled" (click)="portfolioCreationForm.onSaveClicked();">{{ portfolioCreationForm.saveDisabled ? 'Processing...' : 'Continue' }}</button>
        </div>
        <div *ngIf="portfolioCreationForm.showSecondStep">
          <button class="btn btn-transparent" (click)="portfolioCreationForm.onCancelImportClicked();" data-dismiss="modal">Cancel Import</button>
          <button class="btn btn-primary-dark ml-2" [disabled]="portfolioCreationForm.securityMatchedCount == 0" (click)="portfolioCreationForm.onImportMatchedClicked();"
            data-dismiss="modal">Import Matched</button>
        </div>
      </div>
    </div>
  </div>
</div>